<template>
	<view>
		<u-navbar title='合同签约' :autoBack="true" leftIconColor="#1E272E"
			:titleStyle="{fontWeight:700,fontSize:'32rpx',color:'#1E272E'}"></u-navbar>
		<view class="container" style="margin: 0 20rpx;padding-top: 180rpx;box-sizing: border-box;height: 100vh;">
			<scroll-view :scroll-y="true" style="height: 79vh;">
				<view style="margin-bottom: 20rpx;position: relative;" v-if="imgUrl">
					<u--image :showLoading="true" height="70vh" width="100%" :src="'https://'+imgUrl">
						<template v-slot:loading>
							<u-loading-icon color="#13989a"></u-loading-icon>
						</template>
					</u--image>
					<view class="log">
						{{1+'/'+10}}
					</view>
				</view>
				<view style="text-align: center;">
					请点击下方按钮下载完整合同查看
				</view>
			</scroll-view>
			<view class="bottom" :style="{paddingBottom: bottom+'px'} "
				style="width:calc(650rpx);padding:0 50rpx;padding-top: 20rpx;display: flex;justify-content: space-around;"
				v-if="!signSuccess">
				 <!--#ifdef APP-PLUS -->
				 <!-- 安卓适配 -->
				 <view style="width: 312rpx;">
				 	<u-button :plain="true" style="width: 312rpx;"  color='#13989a' @click="downloadFile"
				 		:loading="loading">下载查看完整合同</u-button>
				 </view>
				 <view style="width: 196rpx;">
				 	<u-button  color='#13989a' style="width: 196rpx;" @click="signImg=true"
				 		:loading="loading">电子签字</u-button>
				 </view>
				<!-- #endif -->
				
				 <!--#ifndef APP-PLUS -->
				<view style="width: 40vw;">
					<u-button :plain="true" style="width: 100rpx;" color='#13989a' @click="downloadFile"
						:loading="loading">下载查看完整合同</u-button>
				</view>
				<view style="width: 25vw;">
					<u-button style="width: 100rpx;" color='#13989a' @click="signImg=true"
						:loading="loading">电子签字</u-button>
				</view>
				<!-- #endif -->
			</view>
			<view class="bottom" :style="{paddingBottom: bottom+'px'} "
				style="width:calc(650rpx);padding:0 50rpx;padding-top: 20rpx;display: flex;justify-content: space-around;"
				v-else>
				<u-button color='#13989a' @click="downloadFile1" :loading="loading">下载电子合同</u-button>
			</view>
			<u-popup :show="signImg" @close="signImg=false" @open="signImg=true" >
				<view style="height: 100vh;box-sizing: border-box;;overflow-y: scroll;padding: 0rpx 10rpx 50rpx 10rpx;">
					<u-parse :content="text" :tagStyle="style"></u-parse>
					<view class="flex" style="justify-content: space-around;margin-bottom: 100rpx;margin-top: 50rpx;">
						<view style="width: 30vw;">
							<u-button :plain="true"  color='#13989a' @click="signImg=false">不同意</u-button>
						</view>
						<view style="width: 30vw;">
							<u-button color='#13989a' @click="knownFn">已知晓，同意</u-button>
						</view>
					</view>

					<!-- <view class="signtrue" style="padding:20rpx 50rpx;padding-bottom: 100rpx;width: calc(100% - 100rpx);">
						<view style="margin:20rpx 0;color:#c9c9c9;font-size: 24rpx;"><text style="color:red">*</text>请用以正楷字体签名</view>
						<signtrue @getSignImg='getSignImg'></signtrue>
					</view> -->
				</view>
			</u-popup>
			<u-popup :show="signImg1" @close="signImg1=false" @open="signImg1=true">
				<view class="signtrue" style="padding:20rpx 50rpx;padding-bottom: 100rpx;width: calc(100% - 100rpx);">
					<view style="margin:20rpx 0;color:#c9c9c9;font-size: 24rpx;"><text
							style="color:red">*</text>请用以正楷字体签名</view>
					<signtrue v-if="userFaceImg" :bgImg="userFaceImg" @getSignImg='getSignImg'></signtrue>
				</view>
			</u-popup>
		</view>
	</view>
	<!-- <view  class="container" style="padding-top: 180rpx;box-sizing: border-box;height: 100vh;background-color: #fff;">
		<u-navbar title='合同签约' :autoBack="true" leftIconColor="#1E272E"  :titleStyle="{fontWeight:700,fontSize:'32rpx',color:'#1E272E'}" ></u-navbar>
		<u-parse :content="text" :tagStyle="style" ></u-parse>
		<view class="bottom" :style="{paddingBottom: bottom+'px'} "
			style="width:calc(650rpx);padding:0 50rpx;padding-top: 20rpx;display: flex;justify-content: space-around;"
			v-if="!signSuccess"
			>
			<view style="width: 40vw;">
				<u-button  :plain="true" style="width: 100rpx;"  color='#13989a'  @click="submit" :loading="loading">下载查看完整合同</u-button>
			</view>
			<view style="width: 25vw;">
				<u-button style="width: 100rpx;"  color='#13989a'  @click="signImg=true" :loading="loading" >电子签字</u-button>
			</view>
		</view>
		<view class="bottom" :style="{paddingBottom: bottom+'px'} "
			style="width:calc(650rpx);padding:0 50rpx;padding-top: 20rpx;display: flex;justify-content: space-around;"
			v-else
			>
			<u-button   color='#13989a'  @click="downloadFile1" :loading="loading" >下载电子合同</u-button>
		</view>
		<u-popup :show="signImg" @close="signImg=false" @open="signImg=true">
			<view class="signtrue" style="padding:20rpx 50rpx;padding-bottom: 100rpx;width: calc(100% - 100rpx);">
				<view style="margin:20rpx 0;color:#c9c9c9;font-size: 24rpx;"><text style="color:red">*</text>请用以正楷字体签名</view>
				<signtrue @getSignImg='getSignImg'></signtrue>
			</view>
		</u-popup>
	<!-- </view> -->
</template>

<script>
	import signtrue from '@/components/signtrue/index.vue';
	import {
		creatContractFn
	} from './index.js'
	// import Pdfh5 from "pdfh5";
	// import "pdfh5/css/pdfh5.css";
	let app = getApp();
	export default {
		data() {
			return {
				userFaceImg:'',//自拍的图片
				bottom: app.globalData.safeBottom,
				value: false,
				url: '',
				signImg: false,
				signImg1: false,
				assignTaskId: 0,
				signSuccess: false,
				picture: '',
				imgUrl: '',
				text: '',
				contractId: 0,
				signUrl: '',
				type:null,
				style: {
					p: 'font-size:14px;line-height: 24px;margin: 10rpx 0;text-indent:28px',
					u: 'text-decoration: underline;text-decoration-color:#c0c4cc;',
					table: 'font-size:14px; box-sizing: border-box; border-top: 1px solid #c0c4cc; border-left: 1px solid #c0c4cc;',
					th: 'border-right: 1px solid #c0c4cc; border-bottom: 1px solid #c0c4cc;',
					td: 'border-right: 1px solid #c0c4cc; border-bottom: 1px solid #c0c4cc;',
					li: 'margin: 5px 0;',
					h4: 'text-align:center'
				}
			}
		},
		onLoad(query) {
			this.assignTaskId = query.assignTaskId
			this.url = query.url
			this.imgUrl = query.imgUrl
			this.contractId = query.contractId
			this.type=query.type
		},
		components: {
			signtrue,
		},
		onShow() {
			const {
				text4
			} = creatContractFn()
			this.text = text4
		},
		methods: {
			getUserFace(){
				uni.chooseMedia({
				  count: 1,
				  mediaType: ['image'],
				  sourceType: ['camera'],
				  maxDuration: 30,
				  camera: 'front',
				  success:(res)=> {
				    console.log('摄像头', res.tempFiles)
					
					this.userFaceImg = res.tempFiles[0].tempFilePath
					this.signImg = false
					this.signImg1 = true
				  },
				  fail:(err) =>{
					  console.log('失败',err)
				  }
				})
			},
			
			knownFn() {
				console.log('....')
				uni.showModal({
					title: '提示',
					content: '签订之前需采用摄像头拍摄个人正脸照',
					success: (res)=> {
						if (res.confirm) {
							console.log('用户点击确定');
							this.userFaceImg = '' //为了清楚再次打开后覆盖原来的背景图
							this.getUserFace()
						} else if (res.cancel) {
							this.userFaceImg = ''
							console.log('用户点击取消');
						}
					}
				});
				
				
			},
			getSignImg(e) {
				console.log(e)
				this.picture = e.base64
				uni.$u.http.post('/contract/addAdvertisingContract', {
					assignTaskId: this.assignTaskId,
					signImg: this.picture.split('base64,')[1],
					inputImg: this.url,
					contractId: this.contractId,
					type: this.type //1是广告合同 2是装俢合同
				}).then(res => {
					if (res) {
						this.signUrl = res
						uni.showToast({
							title: '签署成功',
							duration: 1000,
							mask: true,
							complete: () => {
								this.signImg1 = false
								this.signSuccess = true
								uni.downloadFile({
									url: `https://${res}`,
									success: (res1) => {
										var filePath = res1.tempFilePath;
										uni.openDocument({
											filePath: filePath,
											showMenu: true,
											success: function(res) {
												console.log('打开文档成功');
											}
										});
									}
								});
								// this.pageNumber=1
								// this.list=[]
								// this.getTaskList()
							}
						});
					}
				})

			},
			confirm(e) {
				console.log(e)
			},
			downloadFile1() {
				uni.showLoading({
					title: '合同下载中...'
				})
				uni.downloadFile({
					url: `https://${this.signUrl}`,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.hideLoading();
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					},
					fail: () => {
						uni.hideLoading();
						uni.$u.toast('合同下载失败,请联系管理员 :)');
					}
				});
			},
			downloadFile() {
				uni.showLoading({
					title: '合同下载中...'
				})
				uni.downloadFile({
					url: `https://${this.url}`,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.hideLoading();
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					},
					fail: () => {
						uni.hideLoading();
						uni.$u.toast('合同下载失败,请联系管理员 :)');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: white;
		width: 100%;
		padding: 20rpx 0;
		min-height: 20rpx;

	}

	.signtrue {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: white;
		z-index: 10000;
		width: 100%;
		height: 500rpx;
		padding-bottom: 100rpx;
	}

	.log {
		background-color: #ccc;
		border-radius: 15rpx;
		line-height: 30rpx;
		padding: 0 20rpx;
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
		font-size: 20rpx;
	}
</style>